<template>
  <div id="app">
    <h1>Hello World</h1>
    <Pager :current="current" :total="total" :limit="limit" :visibleNumber="visibleNumber" @pageChange="pageChange" />
  </div>
</template>

<script>
import Pager from './index.vue'

export default {
  components: {
    Pager: Pager
  },
  data() {
    return {
      current: 3,
      total: 402,
      limit: 30,
      visibleNumber: 10
    }
  },
  methods: {
    pageChange(page) {
      if (page < 1) {
        this.current = 1
        return;
      }
      if (page > Math.ceil(this.total / this.limit)) {
        this.current = Math.ceil(this.total / this.limit)
        return;
      }
      if (page === this.current) {
        return;
      }
      this.current = page
    }
  }
}


</script>

<style lang="less">
.iconfont {
  font-size: 50px;
  color: skyblue;
}
</style>
